<template>
	<div class="allcontent">
		<div class="search">
			<el-form @submit.native.prevent  :model="searchParam" ref="queryFormRef">
				<el-row gutter="10">
					<el-col span="8">
						<el-form-item prop="title">
							<el-input  size="small" @keyup.enter.native="search" placeholder="请输入标题模糊搜索"  v-model="searchParam.title"></el-input>
						</el-form-item>
					</el-col>
					<el-col  span="8">
						<el-form-item prop="status">
							<el-select  size="small" v-model="searchParam.status" style="width:200px" placeholder="请选择状态搜索">
							    <el-option
							      key="1"
							      label="正常"
							      value="1"
							    />
								<el-option
								  key="0"
								  label="禁用"
								  value="0"
								/>
							  </el-select>
						</el-form-item>
					</el-col>
					<el-col  span="8">
						<el-button  size="small" plain icon="Search"  type="primary" @click="search">搜索</el-button>
					</el-col>
					<el-col  span="8">
						<el-button  size="small" plain icon="Refresh" type="warning" @click="reset(queryFormRef)">重置</el-button>
					</el-col>
				</el-row>
				<el-row gutter="10" style="margin-top:10px;margin-bottom: 10px;">
					<el-col span="8">
						<el-button  size="small"   plain icon="Edit"  v-if="userStore.hasPermission('system:notice:add')" type="success" @click="addDept()">新增</el-button>
					</el-col>
          <el-col span="8">
            <el-button  size="small"   plain icon="Edit"  v-if="userStore.hasPermission('system:notice:update')" type="primary" @click="editData()"  :disabled="selections.length > 1||  selections.length == 0?true:false">编辑</el-button>
          </el-col>
          <el-col span="8">
            <el-popconfirm
                v-if="userStore.hasPermission('system:notice:remove')"
                confirm-button-text="确认"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="是否确认删除这些数据？"
                @confirm="deleteData()"
            >
              <template #reference>
                <el-button  size="small"  plain icon="Delete"  :disabled="selections.length == 0?true:false"  type="danger" >删除</el-button>
              </template>
            </el-popconfirm>
          </el-col>
				</el-row>
			</el-form>
		</div>
		<div class="el-table">
			<el-table :data="tableData" style="width: 100%;font-size: 13px;"
			 v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
			    <el-table-column prop="title" label="标题"/>
				<el-table-column prop="type" label="类型"/>
				<el-table-column prop="content" label="内容" show-overflow-tooltip="true"/>
				<el-table-column prop="status" label="状态">
					<template  #default="scope">
						<el-tag v-if="scope.row.status == 1">正常</el-tag>
						<el-tag type="danger" v-else-if="scope.row.status == 0">禁用</el-tag>
					</template>
				</el-table-column>	
				<el-table-column prop="createTime" label="创建时间">
					<template #default="scope">
						{{formatTimestamp(scope.row.createTime)}}
					</template>
				</el-table-column>
				<el-table-column  label="操作">
					<template  #default="scope">
						<el-button plain icon="Edit"   v-if="userStore.hasPermission('system:notice:update')" size="small" type="primary" @click="editData(scope.row.id)">编辑</el-button>
						<el-popconfirm  v-if="userStore.hasPermission('system:notice:remove')"
						    confirm-button-text="是"
						    cancel-button-text="否"
						    :icon="InfoFilled"
						    icon-color="#626AEF"
						    title="是否删除该数据?"
						    @confirm="deleteData(scope.row.id)"
						  >
						    <template #reference>
						      <el-button  plain icon="Delete"  size="small" type="danger">
								  删除
						      </el-button>
						    </template>
						  </el-popconfirm>
						
					</template>
				</el-table-column>
			</el-table>
		</div>
    <div class="el-pager">
      <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="total"
                     :page-sizes="[10,20,30,40,50]" :pager-count="11"
                     size="small"  background  class="mt-4" :current-page="currentPage"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
		<el-drawer size="40%" v-model="saveDeptDialog" :title="deptTitle" width="50%">
			<save  :t="new Date().getTime()"  :deptId="deptId"   @closeSaveDeptForm="closeSaveDeptForm" @success="success"></save>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
	import {ref,reactive, onMounted} from 'vue'
	import save from './save.vue'
	import {page,remove} from '@/api/notice.ts'
	import type { FormInstance } from 'element-plus'
	import  { ElMessage } from 'element-plus'
	import {useUserStore} from '@/stores/user.ts'
	import {formatTimestamp} from '@/utils/date.ts'
  import {InfoFilled} from "@element-plus/icons-vue";
  const currentPage = ref(1)
  const handleSizeChange = (val: number) => {
    searchParam.limit= val;
    loadData();
  }
  const handleCurrentChange = (val: number) => {
    currentPage.value= val;
    searchParam.page= val;
    loadData();
  }
	const userStore = useUserStore()
  const selections = ref([])
  const handleSelectionChange=(val)=>{
    selections.value=val;
  }
	const searchParam =reactive({
    title:null,
		status:null,
    limit:10,
    page:1,
	})
	const search=()=>{
		loadData()
	}
	const queryFormRef=ref<FormInstance>();
	const reset = (formEl: FormInstance | undefined) => {
		  if (!formEl) return
		  formEl.resetFields()
		  loadData();
	}
  const tableData= ref([]);
  const total=ref(0)
	const loading = ref(false);
	const loadData=()=>{
		loading.value=true;
    page(searchParam).then((res)=>{
			if(res.code === 200){
				tableData.value = res.data.list;
        total.value = res.data.total;
			}
		})
    loading.value=false;
	}
	onMounted(()=>{
		loadData();
	})
	
	const saveDeptDialog = ref(false);
	const deptTitle = ref();
	
	// 关闭保存用户弹出框
	const closeSaveDeptForm = ()=> {
	  saveDeptDialog.value = false
	  deptId.value = null;
	}
	
	// 提交表单回调函数
	const success = ()=> {
	  saveDeptDialog.value = false;
	  deptId.value = null;
	  loadData()
	}
	const deptId = ref()
	const parentId = ref()
	const addDept=(deptId:number)=>{
		deptTitle.value='新增'
		parentId.value=deptId;
		saveDeptDialog.value = true;
	}
	const editData=(id:number)=>{
		deptTitle.value='编辑'
		deptId.value = id;
		saveDeptDialog.value = true;
	}
	const deleteData = async (id) => {
    if(selections.value.length < 0){
      ElMessage({
        type: 'info',
        message: '至少选择一行进行删除',
      })
      return;
    }
    let ids = [];
    if(id != undefined){
      ids.push(id);
    }else{
      selections.value.forEach((item)=>{
        ids.push(item.id)
      })
    }
	  await remove(ids)
	  loadData();
	}
</script>

<style scoped>
.el-pager{
  padding: 1%;
  justify-content: right;
}
	.search{
		margin-bottom: 10px;
	}
	.allcontent{
		height: 65vh;
		position: relative;
	}
	.el-table{
		max-height:70%;
		overflow: auto;
	}
	.el-table::-webkit-scrollbar{
		display: none;
	}
</style>